let $ = layui.$;
import addCinema from "./addCinema.js";
import UpdateCinema from "./UpdateCinema.js";
export default class Cinema{
    constructor(){
       this.render();
       this.handle();
    }
    render(){
        let template = `
        <form class="layui-form" action=""style="display:flex ;margin-left: 120px;">
        <div class="layui-form-item">
          <label class="layui-form-label">查询</label>
          <div class="layui-input-inline">
            <select name="type" lay-verify="required">
              <option value="cinemasName">院线名</option>
              <option value="cinemasAddr">地址</option>
            </select>
          </div>
          <div class="layui-input-inline">
            <input
              type="text"
              name="value"
              placeholder="请输入"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
  
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button
              id="queryBtn"
              type="button"
              class="layui-btn"
              lay-filter="formDemo"
            >
              立即提交
            </button>
          </div>
        </div>
      </form>
  
      <div class="layui-container">
        <div class="layui-row">
          <div class="layui-col-md11">
            <table id="demo" lay-filter="test"></table>
          </div>
        </div>
      </div>
  
      <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
          <button class="layui-btn layui-btn-sm" lay-event="addCinema">
            新增院线
          </button>
        </div>
      </script>
      <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
        <script type="text/html" id="addCinemaTemplate"></script>
        <script type="text/html" id="UpdateCinemaTemplate"></script>

        `
      $("#content").html(template)
    };
    handle(){
        layui.use(["table","layer","jquery","form"],function(){
           let table = layui.table;
           let layer = layui.layer; 
           let $ = layui.$;
           let form = layui.form

        let myCinema = table.render({
             id: "myCinema",
             elem:"#demo",
             url:"/api/cinema/cinema",
             toolbar:"#toolbarDemo",
             page:true,
             cols: [
                [
                  //表头
                  { field: "cinemasName", title: "院线名字" ,fixed: "left", },
                  { field: "cinemasAddr", title: "地址" },
                  { field: "cinemasTel", title: "官方电话" },
                  { field: "cinemasUrl", title: "官方网站"},
                  { field: "operation", title: "操作", toolbar: "#barDemo" },
                ],
              ],
           });
           $("#queryBtn").on("click", function () {
            let key = $("select[name='type']").val();
            let val = $("input[name = 'value']").val();
            table.reload("myCinema", {
              where: {
                key,
                val,
              },
              page: {
                curr: 1,
              },
            });
          });

            //头工具栏事件
            table.on("toolbar(test)", function (obj) {
              switch (obj.event) {
                case "addCinema":
                  new addCinema();
  
                  break;
              }
            });

            table.on("tool(test)", function (obj) {
              //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
              var data = obj.data; //获得当前行数据
              var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
              var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
              // console.log(data);
              if (layEvent === "del") {
                //删除
                layer.confirm("确定删除吗？", function (index) {
                  $.ajax({
                    type: "delete",
                    url: "/api/cinema/delCinema/" + data._id,
                    success: function (res) {
                      if (res.code === 200) {
                        layer.msg(res.msg);
                        obj.del(); // 删除对应行（tr）的 DOM 结构，并更新缓存
                      }
                    },
                  });
                  layer.close(index);
                });
              } else if (layEvent === "edit") {
                new UpdateCinema(data);
              }
            });
        })
    
    }
}